<template>
  <div
    id="withdrawChooseModel"
    class="withdraw-choose-model"
    :class="{isShow: isShow}"
    @click="withdrawModelClick"
  >
    <div class="withdraw-cont">
      <div class="withdraw-title">
        <span>选择提现方式</span>
        <span class="withdraw-add" @click="withdrawAddCard">+添加银行卡</span>
      </div>
      <div class="withdraw-choose-list">
        <div class="withdraw-item"
            v-for="(item, index) in accounts"
            :key="index"
            @click="chooseWithdraw(item)">
          <div class="withdraw-item-left">
            <i class="withdraw-item-cash-icon"></i>
            <span>
              {{item.name}}
              <span class="code" v-if="item.bank_card_no">({{item.bank_card_no}})</span>
            </span>
          </div>
          <i
            class="withdraw-item-icon"
            :class="showWithdrawItem(item.name)"
            :data-id="item.id"
          >
            <span></span>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  props:{
    accounts:{
      type:Array,
      default:()=>[],
    }
  },
  data: function() {
    return {
    };
  },
  computed: {
    getWithdrawChoose() {
      return this.$store.state.wealthWithdraw.withdrawChoose;
    },
    //是否显示面板
    isShow() {
      return this.$store.state.wealth.isShowWithdrawChooseModel;
    }
  },
  methods: {
    withdrawAddCard() {
      this.$router.push('/setting/add-card')
    },
    showWithdrawItem(account) {
      return {
        active: account === this.getWithdrawChoose ? true : false
      };
    },
    chooseWithdraw(account) {
      this.$store.commit("wealthWithdraw/wealthCurrencyCode", account);

      //选中就关闭啊
      this.$store.commit("wealth/SET_isShowWithdrawChooseModel", false);
    },
    withdrawModelClick(e) {
      if (e.target.id && e.target.id === "withdrawChooseModel") {
        this.$store.commit("wealth/SET_isShowWithdrawChooseModel", false);
      }
    }
  }
};
</script>

<style scoped>
.withdraw-choose-model {
  display: none;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.withdraw-choose-model.isShow {
  display: block;
}
.withdraw-cont {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.withdraw-choose-model.isShow .withdraw-cont {
}
.withdraw-title {
  height: 108px;
  font-family: "PingFangSC-Regular";
  font-size: 30px;
  line-height: 108px;
  border-bottom: 2px solid #ededf0;
}
.withdraw-title span {
  position: absolute;
  margin-left: 30px;
  color: rgb(102, 102, 102);
}
.withdraw-title .withdraw-add {
  position: absolute;
  right: 30px;
  color: rgb(32, 134, 249);
}
.withdraw-choose-list {
}
.withdraw-choose-list .withdraw-item {
  margin-left: 30px;
  line-height: 112px;
  height: 112px;
  border-bottom: 2px solid #ededf0;
}
.withdraw-choose-list .withdraw-item:last-child {
  border-bottom: 0;
}
.withdraw-item-left {
  display: inline-block;
}
.withdraw-item-left .withdraw-item-cash-icon {
  position: absolute;
  margin-top: 43px;
  width: 30px;
  height: 26px;
  background: url("~assets/img/brankcard@2x.png") no-repeat;
  background-size: 30px 26px;
}
.withdraw-item:first-child .withdraw-item-cash-icon {
  background: url("~assets/img/cash@2x.png") no-repeat;
  background-size: 30px 26px;
}
.withdraw-item-left span {
  margin-left: 60px;
  font-family: "PingFangSC-Regular";
  font-size: 32px;
  color: rgb(41, 41, 41);
}
.withdraw-item-left .code {
  margin-left: 6px;
  font-size: 28px;
  color: rgb(153, 153, 153);
}
.withdraw-item .withdraw-item-icon {
  /* float: right;
  display: inline-block; */
  position: absolute;
  right: 40px;
  margin-top: 38px;
  width: 36px;
  height: 36px;
  border: 2px solid #bec2cc;
  border-radius: 36px;
}
.withdraw-item .withdraw-item-icon.active {
  border: 2px solid #2086f9;
}
.withdraw-item .withdraw-item-icon span {
  display: block;
  margin-left: 8px;
  margin-top: 8px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 16px;
}
.withdraw-item .withdraw-item-icon.active span {
  background-color: #2086f9;
}
</style>
